<script setup>
import { ref } from 'vue'
import headeItem from './components/headeItem.vue'
import particularsItem from './components/particularsItem.vue'
import IntroductionItems from './components/IntroductionItems.vue'
import reviewItem from './components/reviewItem.vue'
import BelowApplicationWindow from './components/BelowApplicationWindow.vue'
import messageWindow from './components/messageWindow.vue'
import Backbutton from '@/components/Backbutton.vue'
import { showImagePreview } from 'vant'
import { fetchGameInfo } from '@/api/game'
import { useRouter } from 'vue-router'

const router = useRouter()

let gameId = router.currentRoute.value.query.id

let list = [1, 2, 3, 4]

const windowURL = ref(
  'https://img1.baidu.com/it/u=2979077677,2364176659&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
)

// 获取获取游戏详情

let infoData = ref([])
const getGameInfo = async () => {
  let postData = { game_id: gameId * 1 }
  console.log(postData)
  let data = await fetchGameInfo(postData)
  console.log(data, 'fetchGameInfo')
  infoData.value = data
}
getGameInfo()
const show = ref(false)
// 获取整个窗口的宽度
var windowWidth = window.outerWidth
let swipeWidth = windowWidth - 60
const coloseImg = (img) => {
  showImagePreview({
    images: [
      'https://img1.baidu.com/it/u=2695109698,372992270&fm=253&fmt=auto&app=138&f=JPEG?w=957&h=500',
    ],
    closeable: true,
  })
}
const goBack = (img) => {
  router.go(-1)
}
const showImg = (img) => {
  showImagePreview({
    images: [
      'https://img1.baidu.com/it/u=2695109698,372992270&fm=253&fmt=auto&app=138&f=JPEG?w=957&h=500',
    ],
    closeable: true,
  })
}
</script>
<template>
  <div class="application-details-View">
    <div class="header-img">
      <Backbutton />
      <!-- <van-image height="20vh" @click="showImg()" fit="cover" :src="infoData.posters[0]" /> -->
    </div>
    <div class="application-details-contend">
      <headeItem :infoData="infoData"></headeItem>
      <!-- <particularsItem></particularsItem> -->
      <div class="my-swipe-box">
        <!-- <div class="item-title">
          <div>活动</div>
          <div class="item-title-tip">进行中</div>
        </div> -->
        <van-swipe class="my-swipe" indicator-color="white" :width="swipeWidth">
          <van-swipe-item
            v-for="(item, index) in infoData.posters"
            :key="index"
            class="my-swipe-item"
          >
            <BelowApplicationWindow
              style="margin-right: 10px; margin-bottom: 10px"
              :windowURL="item"
            ></BelowApplicationWindow>
          </van-swipe-item>
        </van-swipe>
      </div>
      <IntroductionItems :infoData="infoData"></IntroductionItems>
      <!-- <div class="banner-swipe">
        <van-swipe class="my-swipe" indicator-color="white" :width="swipeWidth">
          <van-swipe-item v-for="(item, index) in list" :key="index" class="my-swipe-item">
            <van-image
              @click="showImg()"
              radius="14"
              src="https://is4-ssl.mzstatic.com/image/thumb/Purple124/v4/08/92/96/08929685-2bf2-e835-4174-7f27289ef8af/mzl.iaweffet.jpg/520x924bb.jpg"
              class="banner-swipe-item"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <reviewItem></reviewItem>
      <messageWindow></messageWindow> -->
    </div>
    <van-dialog v-model:show="show" :showConfirmButton="false" closeOnClickOverlay="true">
      <span class="close-icon-btn" @click="coloseImg()">
        <van-icon name="clear" />
      </span>
      <div class="flip-vertical">
        <img
          src="https://is4-ssl.mzstatic.com/image/thumb/Purple124/v4/08/92/96/08929685-2bf2-e835-4174-7f27289ef8af/mzl.iaweffet.jpg/520x924bb.jpg"
        />
      </div>
    </van-dialog>
  </div>
</template>

<style lang="scss" scoped>
.application-details-View {
  padding: 0px 0 80px 0;
}
.application-details-contend {
  padding: 8px 14px;
}
.item-title {
  font-weight: bold;
  font-size: 20px;
  margin: 10px 0 4px 0;
  .item-title-tip {
    color: var(--van-button-primary-background);
    font-size: 11px;
    margin: 2px;
  }
}
.banner-swipe {
  margin-top: 16px;
  border-bottom: 1px solid #c6c6c8;
  padding-bottom: 16px;
}
.banner-swipe-item {
  margin-right: 10px;
}
.my-swipe-box {
  padding-bottom: 12px;
  border-bottom: 1px solid #c6c6c8;
  margin-bottom: 16px;
}
.my-swipe {
  margin-right: 10px;
}
.van-dialog {
  position: relative;
  .close-icon-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 26px;
  }
}
.flip-vertical {
  display: flex;
  // transform: rotate(90deg);
  // img {
  //   width: 100%;
  //   height: 100%;
  // }
}
</style>
<style lang="scss">
.header-img {
  position: relative;
  .van-image {
    width: 100%;
  }
}
</style>
